<template>
  <div>
    <div class="permissManaTool">
      <el-input placeholder="请输入角色英文名" v-model="role.name" size="small">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input
        placeholder="请输入角色中文名"
        v-model="role.nameZh"
        size="small"
        @keydown.enter.native="addRole"
      ></el-input>
      <el-button
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="addRole"
        >添加角色</el-button
      >
    </div>
    <div class="permissManaMain">
      <el-collapse accordion v-model="activeName" @change="change">
        <el-collapse-item
          :title="item.nameZh"
          :name="item.id"
          v-for="(item, index) in roles"
          :key="index"
        >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button
                style="float: right; padding: 3px 0; color: #ff0000"
                type="text"
                icon="el-icon-delete"
                @click="deleteRole(item.id,item.nameZh)"
              ></el-button>
            </div>
            <div>
              <el-tree
                :data="allMenus"
                :props="defaultProps"
                ref="tree"
                show-checkbox
                :key="index"
                node-key="id"
                :default-checked-keys="selectedMenus"
              ></el-tree>
              <div style="display: flex;justify-content: flex-end">
                <el-button size="mini" @click="cancelUpdate()">取消修改</el-button>
                <el-button size="mini" type="primary" @click="doUpdate(item.id,index)">确认修改</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "permissMana",
  data() {
    return {
      role: {
        name: "",
        nameZh: "",
      },
      roles: [],
      allMenus: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectedMenus: [],
      activeName: -1,
    };
  },
  created() {
    this.initRoles();
  },
  methods: {
    deleteRole(rid,nameZh){
      this.$confirm(
        "此操作将永久删除[" + nameZh + "]角色, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$deletefn("/system/basic/role/" + rid).then((res) => {
            if (res) {
              this.initRoles();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    cancelUpdate(){
      this.activeName = -1;
    },
    doUpdate(rid,index){
      var tree = this.$refs.tree[index].getCheckedKeys(true);
      var data = "?rid=" +rid;
      tree.forEach(item => {
        data += "&mids=" + item;
      })
      this.$put("/system/basic/role/"+data).then(res => {
        if(res){
          this.activeName = -1;
        }
      })
    },
    change(id) {
      if (id) {
        // alert(id)
        this.initAllMenus();
        this.initSelectedMenus(id);
      }
    },
    addRole() {
      if(this.role.name && this.role.nameZh){
        this.$post("/system/basic/role/",this.role).then(res => {
          if(res){
            this.initRoles();
            this.role.name = "";
            this.role.nameZh = "";
          }
        })
      }else{
        this.$message.error("输入框不能为空")
      }
    },
    initRoles() {
      this.$get("/system/basic/role/").then((res) => {
        if (res) {
          this.roles = res;
        }
      });
    },
    //初始化菜单
    initAllMenus() {
      this.$get("/system/basic/role/menus").then((res) => {
        if (res) {
          this.allMenus = res;
        }
      });
    },
    initSelectedMenus(id) {
      this.$get("/system/basic/role/mid/" + id).then((res) => {
        if (res) {
          this.selectedMenus = res;
        }
      });
    },
  },
};
</script>

<style scoped>
.permissManaTool {
  display: flex;
  justify-content: flex-start;
}
.permissManaTool .el-input {
  width: 300px;
  margin-right: 6px;
}
.permissManaMain {
  margin-top: 10px;
  width: 700px;
}
</style>